<template>
  <div class="search-view">
    <div class="main-container-a">
      <div class="search-top">
        <el-button icon="el-icon-arrow-left" class="back" @click="$router.go(-1)"
          >返回</el-button
        >
      </div>
      <div class="search-container">
        <div class="title">
          <h2>搜索结果：</h2>
        </div>
        <div class="list-box">
          <f-List
            :list="list"
            @onUpdate="getWorksListALL"
            v-if="level == 'level1'"
          ></f-List>
          <s-List
            :list="list"
            :starLevel="star_level"
            @onUpdate="getWorksListALL"
            v-if="level == 'level2'"
          ></s-List>
          <t-List
            :list="list"
            @onUpdate="getWorksListALL"
            v-if="level == 'level3'"
          ></t-List>

          <div v-if="list.length > 0" class="more-view">
            <el-pagination
              background
              @current-change="loadMore"
              :current-page.sync="pageInfo.page"
              :page-size="pageInfo.limit"
              layout=" prev, pager, next"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import fList from "./components/CreateList_f.vue";
import sList from "./components/CreateList_s.vue";
import tList from "./components/CreateList_t.vue";
import { getWorksList, getWorksListSec, getWorksListThird } from "@/api/index";
export default {
  name: "header-view",
  components: {
    fList,
    sList,
    tList,
  },
  data() {
    return {
      show: false,
      pageInfo: {
        page: 1,
        limit: 20,
      
        keyword: "",
      },
      // star_level:0,
      list: [],
      total: 0,
      level: "", // 假设初始值为空
    };
  },
  watch: {
    searchValue(newValue) {
      // console.log(newValue);
      this.pageInfo.keyword = newValue;
      this.getWorksListALL();
    },
  },
  computed: {
    searchValue() {
      return this.$store.getters.searchValue;
    },
    userLevel() {
      return Cookies.get("level");
      // return this.$store.getters.userLevel;
    },
    star_level(){
   
      return Number(Cookies.get("star_level")) || 0;
   
    }
  },
  created() {
    this.level = this.userLevel;
    this.getWorksListALL();
  },
  methods: {
    // 获取列表数据
    getWorksListALL() {
      // console.log(this.level);
      this.level = this.userLevel;
      // console.log(this.level);
      this.pageInfo.keyword = this.$store.getters.searchValue;
      let params = Object.assign({}, this.pageInfo);
      if (this.level === "level1") {
        getWorksList(params).then((res) => {
          this.list = res.list;
          this.total = res.total;
        });
      } else if (this.level === "level2") {
        getWorksListSec(params).then((res) => {
          this.list = res.list;
          this.total = res.total;
        });
      } else if (this.level === "level3") {
        getWorksListThird(params).then((res) => {
          this.list = res.list;
          this.total = res.total;
        });
      }
    },
    loadMore(val) {
      this.pageInfo.page = val;
      this.getWorksListALL();
    },
  },
};
</script>

<style scoped>
.search-view {
  margin-top: 70px;
}
.main-container-a {
  width: 1720px;
  margin: 0 auto;
}
.search-top {
  padding: 30px 0;
  border-bottom: 1px solid #000;
}
.more-view {
  margin: 40px auto;
  text-align: center;
}

.search-container {
  padding: 40px 0;
}
</style>
